import "./index.css"
let p = document.querySelector("p");
let begin = document.querySelector(".begin");
let end = document.querySelector(".end");
let reset = document.querySelector(".reset");
let luckyboy = document.querySelector(".luckyboy");
let arr = ["一", "二", "三", "四", "五", "六", "七"];
let preArr = Object.assign([], arr);
let newArr = [];
// 移除的数
let del;
let timer;
//根据数组长度取下标
function getRandom(arr) {
  return Math.floor(Math.random() * arr.length);
}
begin.addEventListener("click", function () {
  // 点击开始后禁止开始键，并开启结束键
  if (arr.length) {
    clearInterval(timer);
    begin.classList.add("disable");
    end.classList.remove("disable");
    // 开启定时器
    timer = setInterval(function () {
      //每100ms生成一个随机数下标
      del = getRandom(arr);
      // 将下标的内容显示
      p.innerHTML = arr[del];
    }, 100);
  } else {
    alert(
      "所有幸运儿都已经轮流抽完了，请点击重置按钮进行新的一轮抽取幸运儿"
    );
  }
});
end.addEventListener("click", function () {
  // 点击结束后禁止结束键，并开启开始键
  begin.classList.remove("disable");
  end.classList.add("disable");
  clearInterval(timer);
  newArr.push(arr[del]);
  arr.splice(del, 1);
});
luckyboy.addEventListener("click", function () {
  // 将新数组的内容输出
  if (newArr.length) {
    alert("你抽取的幸运儿有：" + newArr);
  } else {
    alert("你没有抽取幸运儿");
  }
});
reset.addEventListener("click", function () {
  // 恢复原数组
  arr = Object.assign([], preArr);
  // 清空暂存数组
  newArr = [];
  // 更改p内容
  p.innerHTML = "幸运儿";
  // 改变按钮状态
  begin.classList.remove("disable");
  end.classList.add("disable");
  clearInterval(timer);
});